import { FadeIn } from '@/components/Animation';
import { homeRaptors } from '@/utils';

export default function Raptor() {
  return (
    <div className="homeRaptorMod mainWidth">
      <div className="hrcon">
        <FadeIn>
          <div className="htitle color-black">
            Want to
            <span className="color-blue">get started</span>
            with Raptor Maps?
          </div>
        </FadeIn>
        <div className="tlist flex">
          {homeRaptors.map((item: any, i: number) => (
            <div
              className="titemwrap"
              key={i}
              style={{ background: `url(${item.img}) no-repeat top`, backgroundSize: 'cover' }}
            >
              <div className="tbox">
                <div className="titem">
                  <FadeIn delay={0.9}>
                    <div className="title bold color-yellow size18 m-[10px]">
                      <em>{item.title}</em>
                    </div>
                    <div className="desc text-white text-[32px] font-[500]">{item.desc}</div>
                  </FadeIn>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
